<template>
  <view class="fixed-search px-4 box-border flex h-12 items-center fixed top-0 z-10 bg-white w-full">
    <image class="w-5 h-5" src="@/static/image/search.png"></image>
    <input class="ml-2 h-full w-full" type="text" placeholder="搜索 ID/用户编号/姓名" placeholder-class="plcg" v-model="searchQuery.keyword" @confirm="handleSearch">
  </view>
  <!--占位-->
  <view class="h-12"></view>

  <view class="bg-gray-100 h-10 flex items-center px-4 justify-left text-slate-600 text-sm">
    用户列表
  </view>

  <view class="px-4" v-if="total">
    <!--@click="jumpUserInfo"-->
    <view class="flex justify-between items-center py-3 border-bottom" v-for="item in mxDataList">
      <view class="flex items-center">
        <image :src="item.avatar" class="w-8 h-8 rounded-full"></image>

        <view class="ml-2">
          <view class="text-slate-600 text-sm">{{ item.nickname }}</view>
          <view class="text-slate-600 text-sm">{{ item.uid }}</view>
        </view>

      </view>
      <view>
        <view class="text-red-600 text-sm text-right">￥{{ item.recharge_amount }}</view>
        <view class="text-slate-600 text-xs text-right">{{ moment(item.add_time * 1000).format('YYYY/MM/DD HH:mm:ss') }}</view>
      </view>
    </view>
  </view>

  <view v-else>
    <image class="w-20 h-16 block m-auto mt-14" src="@/static/image/noData.png"></image>
    <view class="mt-2 text-center text-gray-400 text-sm">暂无数据</view>
  </view>

</template>

<script setup lang="ts">
    import { spreadCondPeopleApi } from '@/api/user/index'
    import { onLoad } from '@dcloudio/uni-app'
    import { ref } from "vue";
    import moment from "moment/moment";
    import { onReachBottom } from "@dcloudio/uni-app";

    onLoad(() => {
      getUserList()
    })

    const searchQuery = ref({
      keyword: '',
      page: 1,
      limit: 20
    })

    const mxDataList = ref<any[]>([])
    const total = ref<number>(0)
    const getUserList = async () => {
      const res = await spreadCondPeopleApi(searchQuery.value)
      mxDataList.value = [...mxDataList.value , ...res.data.data]
      total.value = res.data.total
    }

    /** 滚动底部 **/
    onReachBottom(() => {
      if(mxDataList.value.length < total.value) {
        searchQuery.value.page += 1;
        getUserList()
      }
    })

    /** 搜索 **/
    const handleSearch = async () => {
      mxDataList.value = []
      searchQuery.value.page = 1;
      getUserList()
    }

    const jumpUserInfo = () => {
      uni.navigateTo({ url: '/pages/userInfo/index' })
    }
</script>

<style scoped lang="scss">
.fixed-search {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
</style>
